<template>
    <el-container>
        <el-main>
            <ApplicationList v-if="view === 'ApplicationList'" @edit="editApplication" />
            <ApplicationDetail v-if="view === 'ApplicationDetail'" :applicationId="applicationId" @close="closeApplicationDetail" />
        </el-main>
    </el-container>
</template>

<script>
import ApplicationList from "./application-list.vue";
import ApplicationDetail from "./application-detail.vue";

export default {
    components: {
        ApplicationList,
        ApplicationDetail
    },
    data() {
        return {
            view: 'ApplicationList',
            applicationId: null,
        };
    },
    methods: {
        editApplication(item) {
            this.view = 'ApplicationDetail';
            this.applicationId = item.id;
        },
        closeApplicationDetail() {
            this.view = 'ApplicationList';
            this.applicationId = null;
        }
    }
};
</script>

<style lang="scss" scoped>
.ai-application {
    width: 300px;
    height: 90px;
    margin-right: 20px;
    background-color: antiquewhite;

    &:last-child {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        &:hover {}
    }

    .ai-application-actions {

        el-button {
            margin-left: 5px;
        }
    }
}
</style>